<template>
    <el-row :gutter="10">
        <el-col :span="12" class="codeView">
            <mdViewer :value="md" />
        </el-col>
        <el-col class="right-box" :span="12" >
            <h3>效果展示</h3>
            <div class="box">
                <div class="water"></div>
            </div>
        </el-col>
    </el-row>
 </template>
 <script setup >
 import md from "../../doc/css/waterDrop/README.md?raw";
import mdViewer from "../common/mdViewer.vue"
 </script>
 <style scoped lang="scss">
 .right-box{
    background-image: url("../../assets/images/muban.jpg");
   background-repeat: repeat;
   background-size: cover;
 }
 .codeView{
    height: 80vh;
    overflow-y: scroll;
 }
 ::-webkit-scrollbar {
    width: 5px;
    /* 滚动条宽度 */
    height: 10px;
    /* 滚动条高度 */
    background-color: #E6A23C;
    /* 滚动条背景颜色 */
    // border: 1px solid #ccc;
    /* 滚动条边框样式 */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #409EFF;
    /* 滑块颜色 */
    border-radius: 10px;
    /* 滑块圆角 */
}
 h3{
    font-size: 20px;
    font-weight: 500;
}
 .box{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75vh;
    // background-color: rgba(71, 154, 232, 0.137);
    
    .water{
        width: 300px;
        height: 300px;
        border-radius: 43% 57% 70% 30% / 45% 35% 65% 55% ;
        box-shadow: inset 10px 20px 30px rgba(0,0,0,0.5),
        10px 10px 20px rgba(0,0,0,0.3),
        15px 15px 30px rgba(0,0,0,0.05),
        inset -10px -10px 15px rgba(255,255,255,0.8);
        animation: action 3s linear infinite alternate;

    }
 }
 @keyframes action {
    25%{
        border-radius: 43% 57% 63% 37% / 31% 28% 72% 69% ;
    }
    50%{
        border-radius: 43% 57% 57% 43% / 41% 35% 65% 59%  ;
    }
    75%{
        border-radius:38% 62% 35% 65% / 58% 20% 80% 42%  ;
    }
    100%{
        border-radius: 38% 62% 41% 59% / 69% 42% 58% 31%  ;
    }
 }

 </style>